<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search @search="goSearch" v-model="myKeyword" shape="square" :show-action="true" action-text="搜索" :animation="true" margin="10rpx 0rpx"></u-search>
			</view>
			<view class="sortbox">
				<view class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="../../static/icon/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>
				<view class="filter" hover-class="touchOpacity">
					<image src="../../static/icon/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>
		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity"><u-notice-bar mode="vertical" :list="list" :show="true" :close-icon="true"></u-notice-bar></view>

		<!-- 商品列表区域 -->
		<view class="list">
			<view class="row" v-for="(item, index) in goodlist" :key="index" @click="goDtail" :id="item.id">
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image"><u-lazy-load :key="index" :image="$url + item.img" height="218"></u-lazy-load></view>
				<view class="info" hover-class="touchOpacity">
					<text>{{ item.goodsname }}</text>
					<view class="money">
						<text>￥ {{ item.price }}</text>
						<text>￥{{ item.market_price }}</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论 99%好评</text>
				</view>
			</view>
		</view>

		<!-- 底部悬浮球 -->
		<view v-if="topBuffer" class="quick_top" @click="goTop" hover-class="touchOpacity"><image src="../../static/icon/totop.png"></image></view>
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty text="暂无数据~~去逛逛~~" mode="list" :show="!dataBuffer" color="orange" icon-color="orange"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			myKeyword: '',
			value2: '',
			list: ['筛选11.11大促商品,亲,请速速赶来', '筛选11.11大促商品,亲,请速速赶来'],
			show: false,
			mode: 'right',
			mask: true, // 是否显示遮罩
			closeable: true,
			closeIconPos: 'top-right',
			topBuffer: false, //控制悬浮球显示
			dataBuffer: true,
			goodlist: [],
			page: 1,
			size: 5,
			cateid: '',
			type: '',
			totalPage: ''
		};
	},
	onLoad(option) {
		//说明是从搜索框跳转过来的
		if (option.keyword) {
			this.$http({
				url: 'search',
				data: {
					keywords: option.keyword
				}
			}).then(res => {
				if (res.list == null) {
					this.dataBuffer = false;
					this.goodlist = [];
				} else {
					this.goodlist = res.list;
				}
			});
		} else {
			//否则是点击商品二级分类跳转过来的
			this.cateid = option.cateid;
			this.type = option.type;
			this.getList();
		}
	},
	//监听下拉触底加载
	onReachBottom() {
		if (this.page < this.totalPage) {
			this.$tip.load('加载中');
			setTimeout(() => {
				++this.page;
				this.getList();
			}, 1000);
		} else {
			this.$tip.tip('没有更多数据了~');
		}
	},
	//监听上拉刷新数据  记得去pages.json中开启页面的下拉刷新
	onPullDownRefresh() {
		if (this.page < this.totalPage) {
			this.$tip.load('刷新中');
			setTimeout(() => {
				this.page = 2;
				this.goodlist = [];
				this.getList();
			}, 1000);
		} else {
			this.$tip.tip('没有更多数据了~');
		}
	},
	//监听滚动条滚动距离 如果滚动距离>=200 则让悬浮球显示
	onPageScroll() {
		// console.log(scrollY);
		if (scrollY >= 200) {
			this.topBuffer = true;
		} else {
			this.topBuffer = false;
		}
	},
	methods: {
		getList() {
			this.$http({
				url: 'getgoodlist',
				data: {
					cateid: this.cateid,
					page: this.page,
					size: this.size,
					type: this.type
				}
			}).then(res => {
				// console.log(res.list);
				let { goodData, totalPage } = res.list;
				//检测是否有数据展示
				if (totalPage == 0) {
					this.dataBuffer = false;
					this.goodlist = [];
				} else {
					//下拉触底加载 拼接新数据
					this.goodlist = this.goodlist.concat(goodData);
					this.totalPage = totalPage;
				}
				//得到数据后 隐藏下拉触底加载
				this.$tip.hideLoad();
				//关闭刷新动画
				uni.stopPullDownRefresh();
			});
		},
		// 跳转到搜索页面
		goSearch() {
			this.$http({
				url: 'search',
				data: {
					keywords: this.myKeyword
				}
			}).then(res => {
				if (res.list == null) {
					this.dataBuffer = false;
					this.goodlist = [];
				} else {
					this.goodlist = res.list;
				}
			});
			this.myKeyword = '';
		},
		//悬浮球置顶
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0, //回到顶部
				duration: 100 //动画时长
			});
		},

		// 价格筛选事件
		pricesort() {
			uni.showActionSheet({
				itemList: ['升序', '降序']
			});
		},
		goDtail(e) {
			// console.log(e.currentTarget.id);
			uni.navigateTo({
				url: '../gooddesc/gooddesc?id=' + e.currentTarget.id
			});
		}
	}
};
</script>

<style>
/* 引入样式 */
@import url('@/static/css/goodlist.css');
</style>
